<template>
    <div class="wrapper">
        <!-- 可重复表单组件 -->
        <div class="content">
            <slot></slot>
        </div>
        
        <div v-for="(item,index) in dataList" :key="item.uid" class="item item-cls">
            <div class="item-head">
                <div class="title-head">
                    <slot name="title" :item="item" :index="index"></slot>
                </div>
                <div class="actionAdd icon" v-show="dataList.length<max">
                    <slot name="actionAdd">
                        <el-button type="primary" @click="add" icon="el-icon-plus" size="mini" round >{{ addText }}</el-button>
                    </slot>
                </div>
                <div class="actionDel icon" v-show="dataList.length>min">
                    <slot name="actionDel" :item="item" >
                        <el-button @click="del(item)" type="danger" icon="el-icon-delete" size="mini" round>{{ delText }}</el-button>
                    </slot>
                </div>
            </div>
            <slot name="item" :item="item" :index="index"></slot>
            <hr class="bottom-line" v-if="index!=dataList.length-1"/>
        </div>
    </div>
</template>

<script>
import { deepCopy, getRandomNumber, } from '../utils';

export default {
    props: {
        min: {
            type: Number,
            default: 1,
        },
        max: {
            type: Number,
            default: Infinity,
        },
        template: {
            type: Object,
            default: ()=>({ val: '' })
        },
        addText: {
            type: String,
            default: '新增'
        },
        delText: {
            type: String,
            default: '删除'
        },
        value: { // 双向绑定
            type: Array,
            default: ()=>[],
        },
    },
    data(){
        return {
            dataList: [],
        }
    },
    watch: {
        value: {
            handler(newList){
                if(newList.length&&newList.every(el=>!el.uid)){
                    // 每一个项目都不存在uid则证明 并非生成的数据，而是后端传输的数据
                    this.dataList = deepCopy(newList).map(el=>({ uid: this.getSimpleUID(), ...el, }));
                    return this.emitChangeVal();
                }
                
                if(newList.length==0){
                    this.dataList = new Array(this.min).fill(1).map(el=>this.generateObj());
                    return this.emitChangeVal();
                }
            },
            immediate: true,
        },
    },
    methods: {
        emitChangeVal(){
            this.$emit('change', this.dataList);
        },
        getSimpleUID(){
            return `${Date.now()}-${getRandomNumber()}`;
        },
        generateObj(){
            const resultObj =  deepCopy(this.template);
            resultObj.uid = this.getSimpleUID();
            return resultObj;
        },
        add(){
            if(this.dataList.length>=this.max){
                return;
            }
            this.dataList.push(this.generateObj());
            this.emitChangeVal();
        },
        del(item){
            if(this.dataList.length<=this.min){
                return;
            }
            const delIndex = this.dataList.findIndex(el=>el.uid==item.uid);
            if(delIndex!=-1){
                this.dataList.splice(delIndex,1);
                this.emitChangeVal();
            }
        },
    },
    
}
</script>

<style lang="scss" scoped>
.item-cls{
    padding: 15px 30px;
}

.bottom-line{
    border-bottom: 1px solid #eee;
}

.item-head{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title-head{
        flex: 1;
    }
    .icon{
        margin-left: 12px;
    }
}
</style>